<!-- 日志管理 -->
<template>
	<div class="dailyLogAdming" v-loading="dailyLogAdminLoading">
		<div class="title">日志管理</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="">
          <el-input v-model="searchForm.keyWord" placeholder="请输入你要搜索的关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="logAdmin.data" border
        size="mini"
        style="width: 100%" :header-cell-style="{color: '#666'}"
      >
        <el-table-column
          prop="gmtCreate"
          label="操作时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="type"
          label="操作类型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="ip"
          label="IP地址"
          align="center">
        </el-table-column>
        <el-table-column
          prop="location"
          label="IP位置"
          align="center">
        </el-table-column>
        <el-table-column
          prop="account"
          label="操作用户"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="操作状态"
          align="center">
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作描述"
          align="center">
        </el-table-column>
      </el-table>
    </div>
    <myPaging :func="pageUpdate" :total="logAdmin.total"></myPaging>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
import myPaging from '@/components/myPaging.vue'

export default {
  name: 'dailyLogAdming',
  data () {
    return {
      msg: 'hello dailyLogAdming!',
      dailyLogAdminLoading: false,
      searchForm: {
        keyWord: '',
      },
      dataList: [
        {
          time: 'time',
          type: 'type',
          ip: 'ip',
          user: 'user',
          status: 'status',
          desc: 'desc',
        },
        {
          time: 'time',
          type: 'type',
          ip: 'ip',
          user: 'user',
          status: 'status',
          desc: 'desc',
        },
        {
          time: 'time',
          type: 'type',
          ip: 'ip',
          user: 'user',
          status: 'status',
          desc: 'desc',
        },
        {
          time: 'time',
          type: 'type',
          ip: 'ip',
          user: 'user',
          status: 'status',
          desc: 'desc',
        },
      ]
		}
  },
	methods: {
    ...mapActions([
      'getLogAdminListData'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.dailyLogAdminLoading = true

      await this.getLogAdminListData({...this.searchForm, ...pageOption})

      this.dailyLogAdminLoading = false
    },
    routerDetail(id) {
    },
    pageUpdate(option) {
      this.onSubmit(option)
    }
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      logAdmin: 'getLogAdmin',

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.dailyLogAdming {
  background: #fff;
  padding: 0 20px 0 20px;
  min-height: 100%;
}
.dailyLogAdming .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.dailyLogAdming .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}

</style>
